.listitem {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    height: fit-content;
    border-radius: clamp(10px, 1vw, 20px);
    padding: clamp(5px, 1vw, 10px);
    gap: clamp(5px, 1vw, 10px);
    background-color: var(--sec-bg);
    border: 1px solid var(--pale-txt);

    .picture {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        border-radius: clamp(5px, 1vw, 10px);

        img {
            width: 100%;
            height: 100%;
        }
    }

    .contentwrapper {
        * {
            word-wrap: break-word;
            word-break: normal;
        }
    }

    .date {
        position: absolute;
        right: clamp(5px, 1vw, 10px);
        bottom: clamp(3px, 1vw, 5px);
    }
}

.stroke {
    width: clamp(200px, 100%, 720px);

    .picture {
        width: clamp(75px, 10vw, 150px);
        height: clamp(75px, 100%, 150px);
    }

    .contentwrapper {
        flex-shrink: 1;
        flex-grow: 1;
        width: calc(100% - (4 * clamp(5px, 1vw, 10px) + clamp(75px, 10vw, 150px) + clamp(90px,18vw,180px)));
    }

    .buttons {
        display: flex;
        flex-wrap: wrap;
        width: min-content;
        align-self: start;
        justify-content: flex-end;
        gap: clamp(5px, 1vw, 10px);
    }
}

.square {
    width: calc(clamp(90px,36vw,360px) + 3 * clamp(5px, 1vw, 10px));
    min-height: fit-content;
    height: 100%;
    max-height: fit-content;
    flex-direction: column;
    align-items: center;
    cursor: pointer;

    .picture {
        // width: calc(clamp(90px,36vw,360px) - 2 * clamp(5px, 1vw, 10px));
        // height: calc(clamp(90px,36vw,360px) - 2 * clamp(5px, 1vw, 10px));
        width: 100%;
        height: auto;

        img {
            transition: all 0.25s ease-in-out;
        }
    }

    .contentwrapper {
        width: 100%;
        flex-grow: 1;
        word-wrap: break-word;
        position: relative;

        .title {
            width: 80%;
        }

        .content {

        }

        .rate {
            position: absolute;
            right: 5px;
            top: 0;
            display: flex;
            gap: clamp(5px, 1vw, 10px);
        }

        .rate::after {
            content: '\2764';
            color: red;
            scale: (1.3);
        }

    }

    .buttons {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-evenly;
        justify-self: flex-end;
        flex-direction: row;
        width: 100%;
        gap: clamp(5px, 1vw, 10px);
        align-self: flex-end;

        > * {
            flex-grow: 1;
        }
    }
}

.square:hover {
    .picture {
        img {
            scale: (1.1);
        }
    }
} 

.dated {
    padding-bottom: clamp(15px, 5vw, 30px);
}